<template>
    <div class="adderss-box">
        <van-address-edit
            :area-list="areaList"
            show-set-default
            :address-info="addressInfo"
            @save="onSave"
        />
        <!-- loading -->
        <div class="loading-box" v-show="loading">
             <van-loading type="spinner" color="white" />
        </div>
    </div>
</template>
<script>
import areaList from '../../common/area.js'
import areaList1 from '../../common/area-en.js'
import {getMyAddress,postAddAddress,postEditAddress} from '@/api/my/userInfo'
import { Area,Loading,AddressEdit ,Toast,} from 'vant';
import { Locale } from 'vant';
import enUS from '../../common/en-US';//引入英文语言包
 
export default {
    name:'addAddress',
    components:{
        [Area.name]: Area,
        [Loading.name]: Loading,
        [AddressEdit.name]: AddressEdit,
    },
    data (){
        return{
        lang:'zh',//当前网页语言类型 zh 中文  en 英语   
           userId:0,//用户id 
           type:1,//页面类型 1新增 2编辑
           addressInfo:{ isDefault: true, postalCode:'000000', },
           id:0,//订单id 购买或置换
           addressId:0,//地址id
           idx:0,//地址数据的下标
           loading:false,//loading
           areaList,
           
        }
    },
    //实例创建完成后被立即调用
    created (){
       
        //获得语言类型lang
        if(this.$route.query.lang) {
            this.lang = this.$route.query.lang;
            if(this.lang == 'en'){
                Locale.use('en-US', enUS);//组件使用英文语言
                this.areaList = areaList;
            }else{
                this.areaList = areaList;
            }
        }
        //获取用户id
        if(this.$route.query.userId && this.$route.query.userId > 0){
            this.userId = this.$route.query.userId;
             //把用户id存储在缓存
             window.localStorage.setItem("userId",this.userId);
        }else{
            this.userId = window.localStorage.getItem("userId");
        }
        //页面类型 type 1新增 2编辑
        this.type = this.$route.query.type;
        if(this.type == 2){
            this.getUserAddress();
        }else{
            let  _this =this;
            setTimeout(function(){
                _this.loading = false;
            },500)
        }
        if(this.$route.query.id){
             this.id = this.$route.query.id;//订单id
        }
        if(this.$route.query.idx && this.$route.query.idx>0){
            this.idx = this.$route.query.idx;//地址下标
        }

    },
    //
    methods:{
        //获得用户所有地址信息
        getUserAddress(){
             getMyAddress(this.userId).then(res => {
                // console.log(res);
                if(res.code == 200){
                    var data = res.data[this.idx];
                    this.addressId = data.id;//当前地址id
                    console.log(data);
                    var province = data.province;//省
                    var city = data.city;//市
                    var county = data.district;//区/县
                    if(data.is_default == 0){
                        data.isDefault = false;
                    }else{
                        data.isDefault = true;
                    }
                    let cityData = this.areaList;//获取城市信息数据
                    //console.log(cityData);
                    //遍历城市数据 找到对应地址的唯一编码 areaCode
                    for(let i in cityData.province_list){//找省
                        if(cityData.province_list[i] == province){
                            var code1 = i.substring(0,2);
                            //  console.log(code1);
                        }
                    }
                    for(let j in cityData.city_list){//市
                        if(cityData.city_list[j] == city){
                            var code2 = j.substring(2,4);
                        }
                    }
                    // debugger;
                    for(let k in cityData.county_list){//区县
                        if(cityData.county_list[k] == county){//找到区名相同的
                            let key = k;//编码
                            let codeTest = code1+code2;
                            if(key.substring(0,4) == codeTest){//同时判断前四位编码必须一样
                                var code3 = k.substring(4,6);
                                // console.log(code3);
                                break;
                            }
                           
                        }
                    }
                    var code = code1+code2+code3;//拼接地址编码 100101
                    console.log(code);
                    this.addressInfo = {
                        id:data.id,
                        name: data.name,
                        tel: data.mobile,
                        areaCode: code,//地址编码 唯一
                        province: data.province,
                        city: data.city,
                        county: data.district,
                        addressDetail: data.address,
                        postalCode: data.zip_code,
                        isDefault: data.isDefault,
                    }
                    this.loading = false;//隐藏loading
                }
            });
        },
        //保存地址
        onSave(data) {
            let _data = data;
            let _this = this;
            let param = {};

            if(data.isDefault ==true){
                param.isDefault = 1;
            }else{
                param.isDefault = 0;
            }
            param.userId = this.userId;
            param.name = _data.name;
            param.tel = _data.tel;
            param.province = _data.province;
            param.city = _data.city; 
            param.county = _data.county;
            param.addressDetail = _data.addressDetail;  
            param.postalCode = data.postalCode;
            if(this.type ==1){//新增
                console.log(param);
                postAddAddress(param).then(res => {
                  
                    if(res.code == 200){
                        // Toast("保存成功");
                        //跳转到地址列表
                        // this.$router.push({path: '/addressList', query: {id:this.id,type:this.type,lang:this.lang,userId:this.userId}});
                        if(this.lang == 'zh'){
                            Toast("保存成功");
                            let para = {};
                            para.isRefresh = true;//刷新
                            setTimeout(function(){
                                _this.interaction.hReturn(para);	
                            },2100);
                        }else{
                            Toast("Saved successfully");
                            let para = {};
                            para.isRefresh = true;//刷新
                            setTimeout(function(){
                                _this.interaction.hReturn(para);	
                            },2100);
                        }
                    }else{
                        Toast(res.msg);
                    }
                });
            }else{
                param.id = this.addressId;//地址id
                postEditAddress(param).then(res => {
                    console.log(res);
                    if(res.code == 200){
                       
                        let para = {};
                        if(this.lang == 'zh'){
                            Toast("保存成功");
                            let para = {};
                            para.isRefresh = true;//刷新
                            setTimeout(function(){
                                _this.interaction.hReturn(para);	
                            },2100)
                        }else{
                            Toast("Saved successfully");
                            let para = {};
                            para.isRefresh = true;//刷新
                            setTimeout(function(){
                                _this.interaction.hReturn(para);	
                            },2100);
                        }
                        	
                    }else{
                        Toast(res.msg);
                    }
                });
            }
         
          
        },
    }
    
}
</script>

<style lang="stylus" scoped>
.adderss-box{
  height :100%;
}
</style>
<style lang="stylus" >
.adderss-box{
    .van-address-edit__buttons {
        padding :0 !important; 
        width:100% !important;
        position:fixed !important ;
        bottom :0 !important;
        left :0 !important;
        right :0 !important;
        margin :0 !important;
    .van-button{
        height:1.173333rem;
        line-height :1.173333rem;
        margin :0;
    }
    .van-button--danger{
            background:#cb9c57;
            border:none;
            border-radius:0;
    }
    .van-button::before{

    }
}
.van-switch-cell::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    pointer-events: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-top: .213333rem solid #f1f1f1;
}
}
.van-picker__cancel, .van-picker__confirm{
    font-size :.373333rem;
}
textarea.van-field__control{
    min-height:48px;
}

</style>


